<template>
  <div class="TemplateMsgEditSms">
    <!-- 条件 -->
    <div class="serch_box">
      <div class="demo-input-suffix">
        模板编码：
        <el-input v-model="serchTempCodeNo" placeholder="请输入模板编码" />
      </div>
      <!-- <div class="demo-input-suffix">
        机构：
        <el-input v-model="serchInstCode" placeholder="请输入机构编号/名称" />
      </div> -->

      <el-button type="primary" icon="el-icon-search" @click="serchBtn">搜索</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="resetBtn">清空</el-button>
    </div>

    <!-- 操作 -->
    <div class="operation_box">
      <el-button type="primary" icon="el-icon-plus" @click="addBtn">新增</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="slectDeleteBtn">删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="instCode" label="机构编号" />
      <el-table-column prop="instName" label="机构名称" />
      <el-table-column prop="tempChannel" label="模板渠道" />
      <el-table-column prop="tempContent" label="模板内容" show-overflow-tooltip width="250" />
      <el-table-column prop="tempCodeNo" label="模板编码" />
      <el-table-column prop="AccessKey,AccessKeyMin" label="AccessKey">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">{{ scope.row.AccessKeyMin }}</div>
            <button style="background-color: transparent; border: none; color: #666;" type="button">{{ scope.row.AccessKeyMin }}</button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="SecretMin" label="Secret">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top" style="width: 150px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            <div slot="content">{{ scope.row.SecretMin }}</div>
            <button style="background-color: transparent; border: none; color: #666;" type="button">{{ scope.row.SecretMin }}</button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="signature" label="签名" />
      <el-table-column prop="tempCode" label="模板Code" />

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button style="margin: 0 10px;" type="text" size="small" @click="detailBtn(scope.row)">详情</el-button>
          <el-dropdown style="margin: 0 10px; cursor: pointer;">
            <span class="el-dropdown-link">
              更多
              <i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="changeBtn(scope.row)">修改</el-dropdown-item>
              <el-dropdown-item @click.native="deleteBtn(scope.row)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <addDialog ref="addDialog" @fevent="update_table" />
    <detailDialog ref="detailDialog" :detail-msg="detail_Msg" />
    <changeDialog ref="changeDialog" :detail-msg="detail_Msg" @fevent="update_table" />

    <el-pagination
      style="margin-top: 10px "
      background
      :current-page.sync="pageNum"
      :page-size.sync="pageSize"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import addDialog from './components/TempSMS/addDialog'
import detailDialog from './components/TempSMS/detailDialog'
import changeDialog from './components/TempSMS/changeDialog'

import { getList, deleteSmsTemp } from '@/api/smsTemplate'
export default {
  components: { addDialog, detailDialog, changeDialog },
  data() {
    return {
      // 搜索条件
      serchTempCodeNo: '',
      serchInstCode: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,

      // 表格
      loading: false,
      tableData: [],
      multipleSelection: [],
      detail_Msg: ''
    }
  },
  mounted() {
    this.getSemTemp()
  },
  methods: {
    // 获取短信模板
    getSemTemp() {
      this.loading = true
      const prams = {
        templateCode: this.serchTempCodeNo,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getList(prams)
        .then(res => {
          this.tableData = []
          this.loading = false
          console.log('获取短信模板', res)
          const data = res.data.list
          this.total = res.data.total
          data.forEach(el => {
            const list = {
              instCode: el.deptNo,
              instName: el.deptName,
              tempChannel: 'Ali_SMS',
              tempContent: el.templateContent,
              tempCodeNo: el.templateCode,
              AccessKey: el.accessKey,
              AccessKeyMin: el.accessKey,
              Secret: el.accessSecret,
              SecretMin: el.accessSecret,
              signature: el.templateSign,
              tempCode: el.sourceTemplateCode,
              id: el.id
            }
            // accessKey脱敏
            const pre = el.accessKey.slice(0, 6)
            const min = el.accessKey.slice(6, -2)
            const aft = el.accessKey.slice(-2)
            const symbol = []
            let AccessKeyMin = ''
            for (let i = 0; i < min.length; i++) {
              symbol.push('*')
            }
            AccessKeyMin = pre + symbol.join('') + aft
            list.AccessKeyMin = AccessKeyMin

            // SecretMin脱敏
            const _pre = el.accessSecret.slice(0, 6)
            const _min = el.accessSecret.slice(6, -2)
            const _aft = el.accessSecret.slice(-2)
            const _symbol = []
            let _SecretMin = ''
            for (let i = 0; i < _min.length; i++) {
              _symbol.push('*')
            }
            _SecretMin = _pre + _symbol.join('') + _aft
            list.SecretMin = _SecretMin
            this.tableData.push(list)
          })
        })
        .catch(() => {
          this.loading = false
        })
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log('多选', val)
    },

    // 操作后刷新
    update_table() {
      this.getSemTemp()
    },
    // 分页
    handleCurrentChange() {
      this.getSemTemp()
    },

    // 搜索
    serchBtn() {
      console.log('搜索', 'serchTempCodeNo:' + this.serchTempCodeNo + 'serchInstCode:' + this.serchInstCode)
      this.getSemTemp()
    },
    // 清空
    resetBtn() {
      console.log('清空')
      this.serchTempCodeNo = ''
      this.serchInstCode = ''
      this.getSemTemp()
    },

    // 新增
    addBtn() {
      this.$refs.addDialog.addEdit()
    },
    // 详情
    detailBtn(e) {
      this.detail_Msg = e
      this.$refs.detailDialog.detailEdit()
    },
    // 修改
    changeBtn(e) {
      this.detail_Msg = e
      this.$refs.changeDialog.changeEdit()
    },

    // 删除列表
    deleteSmsTempFun(prams) {
      deleteSmsTemp(prams)
        .then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.update_table()
          }
        })
        .catch(() => {
          this.loading = false
        })
    },

    // 删除按钮
    deleteBtn(e) {
      this.$confirm('确认将选择数据删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const prams = {
          id: e.id
        }
        this.deleteSmsTempFun(prams)
      })
    },
    // 批量删除按钮
    slectDeleteBtn() {
      const data = this.multipleSelection
      if (data.length > 0) {
        this.$confirm('确认将选择数据删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const prams = {
			  ids: []
		  }
          data.forEach(el => {
            prams.ids.push(el.id)
          })
          this.deleteSmsTempFun(prams)
        })
      } else {
        this.$message({
          message: '请选择至少一条数据。',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.TemplateMsgEditSms {
	background-color: white;
	padding: 20px;
	// 条件
	.serch_box {
		width: 100%;
		overflow: hidden;

		.demo-input-suffix {
			margin-right: 20px;
			float: left;
			.el-input {
				width: 250px;
				margin-right: 20px;
			}
		}
	}
	// 操作
	.operation_box {
		margin: 50px 0 20px 0;
		.el-button {
			margin-left: 8px;
		}
	}
	// 表格
	.el-dropdown-link {
		font-size: 12px;
		color: #ffb72f;
	}
	/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #ffb72f;
		border-color: #ffb72f;
	}
}
</style>
